<template>
	<view class="page-content">
		<view class="pageTitle" :style="{ 'height': `${menuButtonBounding.bottom + 5}px`, 'position': 'relative' }">
			<view class="titleText"
				:style="{ 'height': `${menuButtonBounding.height}px`, 'line-height': `${menuButtonBounding.height}px`, 'bottom': '5px', 'position': 'absolute', 'text-align': 'center' }">
				<view class="backIcon" @click="linkToBack">
					<i class="iconfont icon-fanhui zlcIcon"></i>
				</view>
				<view class="text">
					{{ props.pageTitle }}
				</view>
				<view class="menuButton">
				</view>
			</view>
		</view>
		
		<view class="background-full">
			<img src="@/static/customNavbar/default-full.png" alt="" class="img" />
		</view>
	</view>
</template>

<script setup lang="ts">
	import { defineProps } from "vue"
	//仓库信息
	import { useSystemStore } from "@/store/useSystemStore";
	const systemStore = useSystemStore();
	let { menuButtonBounding } = systemStore
	
	interface Props {
		pageTitle : string
	}
	//传递的页面标题
	const props = withDefaults(defineProps<Props>(), {
		pageTitle: '页面标题'
	})

	//返回上一页
	let linkToBack = () : void => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.page-content {
		position: -webkit-sticky; /* Safari需要前缀 */
		position: sticky;
		z-index: 99;
		width: 100vw;
		height: fit-content;
		top: 0;
		background: #fff;


		.pageTitle {

			border-bottom: 1px solid #f8f2ff;


			.titleText {
				width: 100%;
				white-space: nowrap;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;
				box-sizing: border-box;
				text-align: center;
				font-weight: bold;

				.backIcon {
					font-size: 30rpx;
					width: 40rpx;
					text-align: center;
					color: rgba(36, 37, 83, 1);

				}

				.text {
					color: rgba(36, 38, 81, 1);

				}

				.menuButton {
					width: 40rpx;
				}
			}
		}
		
		.background-full{
			position: absolute;
			top: 0%;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
			.img{
				width: 100%;
				height: 100%;
			}
		}
	}
</style>